<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:common="http://www.contact.common.com/contacts/ui"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:core="http://www.contact.core.com/contacts/core/ui">

<ui:component>
    <link rel="stylesheet" type="text/css" href="./style/css/main.css"/>

    <common:modalPanel id="signUpAddModalPanel"
                       header="#{resources.createNewAccountLabel}"
                       bean="#{welcome}"
                       resetButton="#{resources.resetButton}"

            >
        <ui:define name="panelBody">


            <rich:tabPanel id="signUpTabPanel" switchType="client">
                <rich:tab label="#{resources.accountRichTab}">
                    <h:panelGroup styleClass="singUpTab" layout="block">
                        <center>
                            <br/>
                            <h:panelGrid columns="2">
                                <h:outputLabel style="text-align:right" value="#{resources.firstNameLabel}"/>
                                <h:inputText id="firstName" value="#{accountSessionBean.account.firstName}"
                                             style="width:100%;"
                                             validatorMessage="Firstname not valid."
                                             required="true" requiredMessage="You must have a first name">
                                    <f:validator validatorId="alphaValidator"/>
                                    <rich:ajaxValidator event="onblur"/>
                                </h:inputText>

                                <h:column/>
                                <rich:message for="firstName"/>

                                <h:outputLabel style="text-align:right" value="#{resources.lastNameLabel}"/>
                                <h:inputText id="lastName" value="#{accountSessionBean.account.lastName}"
                                             style="width:100%;"
                                             validatorMessage="Lastname not valid."
                                             required="true" requiredMessage="You must have a last name"
                                        >
                                    <f:validator validatorId="alphaValidator"/>
                                    <rich:ajaxValidator event="onblur"/>
                                </h:inputText>

                                <h:column/>
                                <rich:message for="lastName"/>


                                <h:outputLabel style="text-align:right" value="#{resources.emailLabel}"/>
                                <h:inputText id="email" value="#{accountSessionBean.account.mail}"
                                             style="width:100%;"
                                             validatorMessage="Please enter valid email."
                                             required="true" requiredMessage="You must have an e-mail"
                                        >
                                    <f:validator validatorId="emailValidator"/>
                                    <f:validateLength minimum="9" maximum="60"/>
                                    <rich:ajaxValidator event="onblur"/>
                                </h:inputText>

                                <h:column/>
                                <rich:message for="email"/>

                                <h:outputLabel style="text-align:right" value="#{resources.passwordLabel}"/>
                                <h:inputSecret id="password" value="#{accountSessionBean.account.password}"
                                               style="width:100%;"
                                               validatorMessage="Must be minimum 6 characters long."
                                               required="true" requiredMessage="Must be minimum 6 characters long"
                                        >
                                    <f:validateLength minimum="6"/>
                                    <rich:ajaxValidator event="onblur"/>
                                </h:inputSecret>

                                <h:column/>
                                <rich:message for="password"/>

                                <h:outputLabel style="text-align:right" value="#{resources.genderLabel}"/>
                                <h:panelGrid columns="2">
                                    <h:selectOneRadio value="#{accountSessionBean.account.male}" required="true">
                                        <f:selectItem itemValue="true" itemLabel="#{resources.maleSelectItem}"/>

                                        <f:selectItem itemValue="false" itemLabel="#{resources.femaleSelectItem}"/>
                                    </h:selectOneRadio>
                                </h:panelGrid>

                                <h:outputLabel style="text-align:right" value="#{resources.birthdayLabel}"/>
                                <h:panelGrid columns="3" style="width:100%;">
                                    <rich:comboBox value="#{accountSessionBean.mounth}"
                                                   enableManualInput="false"
                                                   selectFirstOnUpdate="false"
                                                   defaultLabel="#{resources.mounthLabel}"
                                                   width="75px"
                                                   required="true"
                                            >
                                        <f:selectItems value="#{welcome.mounths}"/>
                                    </rich:comboBox>
                                    <rich:comboBox value="#{accountSessionBean.day}"
                                                   enableManualInput="false"
                                                   selectFirstOnUpdate="false"
                                                   defaultLabel="#{resources.dayLabel}"
                                                   width="60px"
                                                   required="true"
                                            >
                                        <f:selectItems value="#{welcome.days}"/>
                                    </rich:comboBox>
                                    <rich:comboBox value="#{accountSessionBean.year}"
                                                   enableManualInput="false"
                                                   selectFirstOnUpdate="false"
                                                   defaultLabel="#{resources.yearLabel}"
                                                   width="60px"
                                                   required="true"
                                            >
                                        <f:selectItems value="#{welcome.years}"/>
                                    </rich:comboBox>


                                </h:panelGrid>

                                <h:column/>
                                <h:panelGrid style="text-align:left; width:100%" columns="1">
                                    <h:outputLabel value="#{resources.securityCheckLabel}"/>
                                    <a4j:outputPanel id="securityImageForgot">
                                        <core:securityImage style="width:220px; resize:both" value="singup"/>
                                    </a4j:outputPanel>

                                    <h:panelGrid columns="2" style="width:220px">
                                        <h:outputLabel value="#{resources.textInBoxLabel}"/>
                                        <h:inputText value="#{securityTextSessionBean.reSecurityText}"/>
                                    </h:panelGrid>


                                </h:panelGrid>



                                <h:selectBooleanCheckbox id="conditionsCheckBox" style="text-align:right" value="true"/>
                                <h:outputLabel for="#{rich:clientId('conditionsCheckBox')}"
                                               value="#{resources.agreementLabel} ">
                                    <a4j:commandLink value="#{resources.conditionTermLabel}"
                                                     oncomplete="RichFaces.switchTab('#{rich:clientId('signUpTabPanel')}', '#{rich:clientId('conditinTermTab')}','');"/>
                                </h:outputLabel>
                            </h:panelGrid>
                        </center>


                    </h:panelGroup>

                </rich:tab>
                <rich:tab id="conditinTermTab" label="#{resources.conditionTermLabel}">
                    <h:panelGroup styleClass="singUpTab" layout="block">
                        Here is condition term of using
                    </h:panelGroup>

                </rich:tab>

            </rich:tabPanel>


        </ui:define>
        <ui:define name="actionCommand">
            <a4j:commandButton id="submitButton"
                               type="submit"
                               styleClass="button"
                               value="#{resources.okButton}"
                               action="#{welcome.action}"
                               reRender="#{resources.resetButton}"
                    />
            <a4j:commandButton id="resetButton"
                               styleClass="button"
                               type="reset"
                               reRender="signUpAddModalPanelForm"
                               value="#{resources.resetButton}"
                    />

        </ui:define>

    </common:modalPanel>


</ui:component>


</html>
